import React from 'react'

import { getSuitableUnit, getValueByUnit } from 'utils/monitoring'

import styles from './index.scss'

export default function ResourceItem(props) {
  const title = t(props.name)
  const unit = getSuitableUnit(props.total, props.unitType) || unit
  const used = getValueByUnit(props.used, unit)
  const total = getValueByUnit(props.total, unit) || used

  return (
    <div className={styles.item}>
      <div>{`${title} cores`}</div>
      <div
        style={{
          textAlign: 'center',
        }}
      >
        {/* {`${props.used}`} */}
        3/20
      </div>
      <div
        style={{
          textAlign: 'center',
          backgroundColor: '#dae8fc',
          fontSize: 15,
        }}
      >{`${Math.round((used * 100) / total)}%`}</div>
    </div>
  )
}
